<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:sf="http://java.sun.com/jsf/composite/datavalve"
	template="/WEB-INF/templates/default.xhtml">
	<ui:define name="content">

		<h:form id="form">


			<h3>Search For People</h3>
			<h:panelGrid columns="2">

				<h:outputText value="First Name : " style="label" />
				<h:inputText value="#{searchCriteria.firstName}" />
				<h:outputText value="Last Name : " />
				<h:inputText value="#{searchCriteria.lastName}" />
				<h:outputText value="Phone : " />
				<h:inputText value="#{searchCriteria.phone}" />

				<h:commandButton value="Refresh" action="#{personSearch.refresh}">
					<f:ajax execute="form" render="form"
						disabled="#{not searchCriteria.ajaxEnabled}" />
				</h:commandButton>


			</h:panelGrid>

			<small style="float: right">Use Ajax : <h:selectBooleanCheckbox
				value="#{searchCriteria.ajaxEnabled}">
				<f:ajax render="form" execute="form" />
			</h:selectBooleanCheckbox> </small>
			<br />
			<br />
			<h:dataTable value="#{personResults}" var="v_person"
				id="searchResults" styleClass="dataTable"
				columnClasses="smallCol,medCol,medCol" rowClasses="evenRow,oddRow">
				<h:column
					headerClass="#{personSearch.orderKey == 'id' ? 'sortedHeaderClass' : 'headerClass'}">
					<f:facet name="header">
						<sf:sortLink paginator="#{personSearch}" key="id"
							ajaxEnabled="#{searchCriteria.ajaxEnabled}" caption="Person Id" />
					</f:facet>
					#{v_person.id}
				</h:column>
				<h:column
					headerClass="#{personSearch.orderKey == 'name' ? 'sortedHeaderClass' : 'headerClass'}">
					<f:facet name="header">
						<sf:sortLink paginator="#{personSearch}" key="name" caption="Name"
							ascImageUrl="#{resources['/gfx/weld.png']}"
							ajaxEnabled="#{searchCriteria.ajaxEnabled}" />
					</f:facet>
					#{v_person.name}							
			    </h:column>

				<h:column
					headerClass="#{personSearch.orderKey == 'phone' ? 'sortedHeaderClass' : 'headerClass'}">
					<f:facet name="header">
						<sf:sortLink paginator="#{personSearch}" key="phone"
							ajaxEnabled="#{searchCriteria.ajaxEnabled}"
							caption="Phone Number" />
					</f:facet>
					<h:outputText value="#{v_person.phone}" converter="personPhone" />
				</h:column>

			</h:dataTable>

			<sf:simplePaginator paginator="#{personSearch}"
				ajaxEnabled="#{searchCriteria.ajaxEnabled}" />
		</h:form>

	</ui:define>
</ui:composition>
